<template>
  <div class="map" style="height: 410px;position: relative;">
    <img @click="rebackMap" v-show="isreturn" src="@/assets/logo.png" alt="" style="z-index:999;
      position: absolute;
      right: 20px;
      top: 15px;">
    <div id="map" style="height: 410px;"></div>
  </div>
</template>
<script>
import cityExport from '@/assets/json/cityExport.js';
export default {
  data () {
    return {
      isreturn: false, // 是否显示返回全国地图按钮
      mapChart: null, //地图对象
      mapOption: null,//地图属性
      dataList: [ //地图标记经纬度坐标和code码,可只要经纬度
        { name: "西藏", value: [91.23, 29.5, 2333] },
        { name: "黑龙江", value: [128.03, 47.01, 1007] },
      ],
    }
  },
  mounted () {
    this.getMap()
  },
  methods: {
    getMap () { //地图
      if (!this.mapChart) {
        this.mapChart = this.$echarts.init(document.getElementById('map'));
      }
      this.mapOption = {
        // 背景颜色
        backgroundColor: "#00264e",
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100
        },
        map: 'china',
        roam: true,//是否启缩放和平移
        scaleLimit: {
          min: 1,
          max: 5
        },
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: '#fff'
          }
        },
        // 地图配置
        geo: {
          map: "china",
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "#eee",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#eee",
              },
            },
          },
          regions: [],
          formatter (params) {
            alert(params)
            console.log(params)
            return `${params.name}<br/>所在地区${params.data}`
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "#ccc",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "#457b9d",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
        // series: [  // 根据坐标点进行定位
        //   {
        //     name: '站点信息',
        //     coordinateSystem: 'geo',
        //     type: 'scatter',
        //     geoIndex: 0,
        //     itemStyle: {
        //       normal: {
        //         color: '#c23531'
        //       },
        //       emphasis: {
        //         borderColor: '#fff',
        //         borderWidth: 1,
        //         opacity: 0.5
        //       }
        //     },
        //     symbolSize: 12,
        //     data: this.dataList
        //   }

        // ],
        series: [  // 根据name进行定位
          {
            name: '站点信息',
            coordinateSystem: 'geo',
            type: 'map',
            geoIndex: 0,
            itemStyle: {
              normal: {
                color: '#c23531'
              },
              emphasis: {
                borderColor: '#fff',
                borderWidth: 1,
                opacity: 0.5
              }
            },
            symbolSize: 12,
            data: this.dataList
          }

        ],
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      this.$echarts.registerMap('china', cityExport.china);
      this.dataList = []
      cityExport.china.features.forEach(item => {
        this.dataList.push({ name: item.properties.name, value: [200, 300] })
        // this.mapOption.geo.regions.push({
        //   name: item.properties.name,
        //   itemStyle: {
        //     normal: {
        //       areaColor: 'red',
        //       borderWidth: 5
        //     }
        //   },
        // })
      })
      this.mapOption.series[0].data = this.dataList
      this.mapChart.setOption(this.mapOption);
      //地图点位点击事件
      this.mapChart.on('click', params => {
        // 获取点击的省份名称
        let provinceName = params.name
        // 判断点击的省份是否有标记点 有则只显示该省的标记 否则会将其他省份的坐标点一起显示
        // this.dataList.map(item => {
        //   if (item.name == provinceName) {
        //     this.mapOption.series[0].data = [item];
        //   }
        // })
        // 进入省级地图
        cityExport.cityList.map(value => {
          if (value.name.indexOf(provinceName) !== -1) {
            this.mapChart.clear();
            this.mapOption.geo.map = 'Pmap';
            this.$echarts.registerMap('Pmap', value.data)
            console.log('value', value)
            value.data.features.forEach(item => {
              this.dataList.push({ name: item.properties.name, value: [200, 300] })
              // this.mapOption.geo.regions.push({
              //   name: item.properties.name,
              //   itemStyle: {
              //     normal: {
              //       areaColor: 'red',
              //       borderWidth: 5
              //     }
              //   },
              // })
            })
            this.mapOption.series[0].data = this.dataList
            this.mapChart.setOption(this.mapOption);
            this.isreturn = true;
          }
        });
      })
    },
    rebackMap () { //返回全国地图
      this.mapChart.clear();
      this.mapOption.series[0].data = this.dataList //重新标记
      this.mapOption.geo.map = 'china';
      this.$echarts.registerMap('china', cityExport.china);
      this.mapChart.setOption(this.mapOption);
      this.isreturn = false;
    }
  }
}
</script>

